<template>
  <!--<div>-->
  <!--  <div class="mb-5">-->
  <!--    <Header></Header>-->
  <!--  </div>-->

  <!--  <div class="container context">-->
  <!--      <router-view :key="this.$route.fullPath"></router-view>-->
  <!--  </div>-->

  <!--  <div>-->
  <!--    <Footer></Footer>-->
  <!--  </div>-->
  <!--</div>-->
    <div id="app">
        <div class="blob"></div>
        <router-view :key="this.$route.fullPath"></router-view>
    </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped>
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(180deg, rgba(47,184,255, .42) 31.77%, #5c9df1 100%);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    transform: translate(-100px, -50px) rotate(-90deg);
    transition: 1s cubic-bezier(.07, .8, .16, 1);
    animation: animateBlob 40s infinite alternate;
}

.blob:hover {
    width: 520px;
    height: 520px;
    filter: blur(30px);
    box-shadow:
            inset 0 0 0 5px rgba(255,255,255,.6),
            inset 100px 100px 0 0 #fa709a,
            inset 200px 200px 0 0 #784ba8,
            inset 300px 300px 0 0 #2b86c5;
}

@keyframes animateBlob {
    100% {
        transform: translate(calc(100vw - 300px), calc(100vh - 500px)) rotate(-10deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }

}
</style>
